<template>
	<view class="bargain-section">
		<view class="section-header">
			<text class="section-title">砍价活动</text>
			<switch :checked="bargainConfig.enableBargain" @change="handleBargainSwitch" color="#2196F3" />
		</view>
		
		<view class="bargain-settings" v-if="bargainConfig.enableBargain">
			<!-- 起始金额设置 -->
			<view class="setting-item">
				<text class="setting-label">起始金额（元）</text>
				<input 
					v-model.number="bargainConfig.initialPrice" 
					type="digit" 
					placeholder="请输入起始金额" 
					class="setting-input"
					maxlength="10"
					@input="handleConfigChange"
				/>
			</view>
			
			<!-- 砍价策略选择 -->
			<view class="setting-item mode-selector">
				<text class="setting-label">砍价模式</text>
				<view class="mode-tabs">
					<view 
						class="mode-tab" 
						:class="{ 'active': bargainConfig.mode === 'fixed' }"
						@click="handleBargainModeChange('fixed')"
					>
						<text>固定金额</text>
					</view>
					<view 
						class="mode-tab" 
						:class="{ 'active': bargainConfig.mode === 'random' }"
						@click="handleBargainModeChange('random')"
					>
						<text>随机金额</text>
					</view>
					<view 
						class="mode-tab" 
						:class="{ 'active': bargainConfig.mode === 'decrease' }"
						@click="handleBargainModeChange('decrease')"
					>
						<text>递减模式</text>
					</view>
					<view 
						class="mode-tab" 
						:class="{ 'active': bargainConfig.mode === 'percentage' }"
						@click="handleBargainModeChange('percentage')"
					>
						<text>百分比模式</text>
					</view>
				</view>
			</view>
			
			<!-- 固定金额模式配置 -->
			<view class="mode-config" v-if="bargainConfig.mode === 'fixed'">
				<view class="setting-item">
					<text class="setting-label">每次砍价（元）</text>
					<input 
						v-model.number="bargainConfig.step" 
						type="digit" 
						placeholder="默认10元" 
						class="setting-input"
						maxlength="10"
						@input="handleConfigChange"
					/>
				</view>
				<view class="mode-description">
					<uni-icons type="info" size="14" color="#999"></uni-icons>
					<text>每人每次砍价的金额固定不变，简单明确</text>
				</view>
			</view>
			
			<!-- 随机金额模式配置 -->
			<view class="mode-config" v-if="bargainConfig.mode === 'random'">
				<view class="setting-item">
					<text class="setting-label">最小金额（元）</text>
					<input 
						v-model.number="bargainConfig.minAmount" 
						type="digit" 
						placeholder="最小5元" 
						class="setting-input"
						maxlength="10"
						@input="handleConfigChange"
					/>
				</view>
				<view class="setting-item">
					<text class="setting-label">最大金额（元）</text>
					<input 
						v-model.number="bargainConfig.maxAmount" 
						type="digit" 
						placeholder="最多20元" 
						class="setting-input"
						maxlength="10"
						@input="handleConfigChange"
					/>
				</view>
				<view class="mode-description">
					<uni-icons type="info" size="14" color="#999"></uni-icons>
					<text>每次砍价金额在设定范围内随机生成，增加趣味性</text>
				</view>
			</view>
			
			<!-- 递减模式配置 -->
			<view class="mode-config" v-if="bargainConfig.mode === 'decrease'">
				<view class="setting-item">
					<text class="setting-label">首次砍价（元）</text>
					<input 
						v-model.number="bargainConfig.step" 
						type="digit" 
						placeholder="首次砍价金额" 
						class="setting-input"
						maxlength="10"
						@input="handleConfigChange"
					/>
				</view>
				<view class="setting-item">
					<text class="setting-label">递减比例</text>
					<picker mode="selector" :range="decreaseRateOptions" :value="decreaseRateIndex" @change="handleDecreaseRateChange">
						<view class="picker-display">
							<text>{{ ((1 - bargainConfig.decreaseRate) * 100).toFixed(0) }}% 递减</text>
							<uni-icons type="bottom" size="14" color="#999"></uni-icons>
						</view>
					</picker>
				</view>
				<view class="mode-description">
					<uni-icons type="info" size="14" color="#999"></uni-icons>
					<text>每次在递减后的基准金额±30%范围内随机，既有递减趋势又有惊喜</text>
				</view>
			</view>
			
			<!-- 百分比模式配置 -->
			<view class="mode-config" v-if="bargainConfig.mode === 'percentage'">
				<view class="setting-item">
					<text class="setting-label">砍价百分比（%）</text>
					<input 
						v-model.number="bargainConfig.percentage" 
						type="digit" 
						placeholder="每次砍掉原价的X%" 
						class="setting-input"
						maxlength="5"
						@input="handleConfigChange"
					/>
				</view>
				<view class="mode-description">
					<uni-icons type="info" size="14" color="#999"></uni-icons>
					<text>每次砍掉原价的固定百分比，适合不同价位商品</text>
				</view>
			</view>
			
			<!-- 预览提示 -->
			<view class="bargain-preview" v-if="bargainConfig.initialPrice > 0">
				<view class="preview-header">
					<uni-icons type="eye" size="16" color="#2196F3"></uni-icons>
					<text class="preview-title">预览效果</text>
				</view>
				<text class="preview-text">起始价：¥{{ bargainConfig.initialPrice.toFixed(2) }}</text>
				<text class="preview-text highlight">{{ previewBargainAmount }}</text>
			</view>
			
			<text class="tip">开启砍价后，用户可帮忙砍价，每人每天最多砍3次</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'kanjia',
	props: {
		// 使用 v-model 双向绑定砍价配置
		modelValue: {
			type: Object,
			default: () => ({
				enableBargain: false,
				initialPrice: 0,
				step: 10,
				mode: 'fixed',
				minAmount: 5,
				maxAmount: 20,
				percentage: 1,
				decreaseRate: 0.8
			})
		}
	},
	data() {
		return {
			// 内部配置对象
			bargainConfig: {
				enableBargain: false,
				initialPrice: 0,
				step: 10,
				mode: 'fixed',
				minAmount: 5,
				maxAmount: 20,
				percentage: 1,
				decreaseRate: 0.8
			},
			// 递减比例选项
			decreaseRateOptions: [0.9, 0.85, 0.8, 0.75, 0.7]
		}
	},
	computed: {
		// 计算当前选中的递减比例索引
		decreaseRateIndex() {
			return this.decreaseRateOptions.indexOf(this.bargainConfig.decreaseRate)
		},
		// 计算预览砍价金额
		previewBargainAmount() {
			switch(this.bargainConfig.mode) {
				case 'fixed':
					return `每次固定砍掉 ¥${(this.bargainConfig.step || 10).toFixed(2)}`
				case 'random':
					return `每次随机砍掉 ¥${(this.bargainConfig.minAmount || 5).toFixed(2)} ~ ¥${(this.bargainConfig.maxAmount || 20).toFixed(2)}`
				case 'percentage':
					const percentAmount = this.bargainConfig.initialPrice * (this.bargainConfig.percentage || 1) / 100
					return `每次砍掉原价的 ${this.bargainConfig.percentage}%（约¥${percentAmount.toFixed(2)}）`
				case 'decrease':
					return `首次砍掉 ¥${(this.bargainConfig.step || 10).toFixed(2)}，之后每次递减 ${((1 - this.bargainConfig.decreaseRate) * 100).toFixed(0)}% 并在区间内随机`
				default:
					return ''
			}
		}
	},
	watch: {
		// 监听外部传入的配置变化
		modelValue: {
			handler(newVal) {
				if (newVal) {
					this.bargainConfig = { ...newVal }
				}
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		// 处理砍价开关变化
		handleBargainSwitch(e) {
			this.bargainConfig.enableBargain = e.detail.value
			
			// 开启时，设置默认值
			if (e.detail.value && this.bargainConfig.initialPrice === 0) {
				this.bargainConfig.initialPrice = 100
				this.bargainConfig.step = 10
				this.bargainConfig.minAmount = 5
				this.bargainConfig.maxAmount = 20
				this.bargainConfig.percentage = 1
				this.bargainConfig.decreaseRate = 0.8
			}
			
			// 关闭时清空
			if (!e.detail.value) {
				this.bargainConfig.initialPrice = 0
				this.bargainConfig.step = 10
			}
			
			this.emitChange()
		},
		
		// 切换砍价模式
		handleBargainModeChange(mode) {
			this.bargainConfig.mode = mode
			// 根据不同模式设置默认值
			switch(mode) {
				case 'fixed':
					this.bargainConfig.step = this.bargainConfig.step || 10
					break
				case 'random':
					this.bargainConfig.minAmount = this.bargainConfig.minAmount || 5
					this.bargainConfig.maxAmount = this.bargainConfig.maxAmount || 20
					break
				case 'percentage':
					this.bargainConfig.percentage = this.bargainConfig.percentage || 1
					break
				case 'decrease':
					this.bargainConfig.step = this.bargainConfig.step || 10
					this.bargainConfig.decreaseRate = this.bargainConfig.decreaseRate || 0.8
					break
			}
			this.emitChange()
		},
		
		// 处理递减比例变化
		handleDecreaseRateChange(e) {
			this.bargainConfig.decreaseRate = this.decreaseRateOptions[e.detail.value]
			this.emitChange()
		},
		
		// 处理配置变化
		handleConfigChange() {
			this.emitChange()
		},
		
		// 向父组件发送配置变化事件
		emitChange() {
			this.$emit('update:modelValue', { ...this.bargainConfig })
		}
	}
}
</script>

<style lang="scss" scoped>
// 砍价设置区域样式
.bargain-section {
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
	.bargain-settings {
		margin-top: 20rpx;
		
		.setting-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding: 20rpx;
			background-color: #f7f7f7;
			border-radius: 12rpx;
			
			.setting-label {
				font-size: 28rpx;
				color: #666;
				flex-shrink: 0;
				width: 200rpx;
			}
			
			.setting-input {
				flex: 1;
				height: 60rpx;
				padding: 0 20rpx;
				background-color: #fff;
				border-radius: 8rpx;
				font-size: 28rpx;
				text-align: right;
			}
			
			.picker-display {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				background-color: #fff;
				border-radius: 8rpx;
				height: 60rpx;
				
				text {
					font-size: 28rpx;
					color: #333;
				}
			}
			
			&.mode-selector {
				flex-direction: column;
				align-items: flex-start;
				gap: 16rpx;
				padding: 24rpx;
				
				.setting-label {
					width: auto;
					font-weight: 500;
					color: #333;
				}
			}
		}
		
		.mode-tabs {
			display: flex;
			gap: 12rpx;
			width: 100%;
			flex-wrap: wrap;
			
			.mode-tab {
				flex: 1;
				min-width: 140rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				border: 2rpx solid #e0e0e0;
				border-radius: 8rpx;
				transition: all 0.3s;
				
				text {
					font-size: 26rpx;
					color: #666;
					font-weight: 400;
				}
				
				&.active {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					border-color: #667eea;
					box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
					
					text {
						color: #fff;
						font-weight: 600;
					}
				}
			}
		}
		
		.mode-config {
			margin-top: 12rpx;
			padding: 20rpx;
			background-color: #fafafa;
			border-radius: 12rpx;
			border-left: 4rpx solid #667eea;
			
			.mode-description {
				display: flex;
				align-items: center;
				gap: 8rpx;
				padding: 16rpx;
				background-color: rgba(102, 126, 234, 0.08);
				border-radius: 8rpx;
				margin-top: 12rpx;
				
				text {
					font-size: 24rpx;
					color: #666;
					line-height: 1.5;
				}
			}
		}
		
		.bargain-preview {
			padding: 24rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 12rpx;
			margin: 20rpx 0;
			box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.25);
			
			.preview-header {
				display: flex;
				align-items: center;
				gap: 8rpx;
				margin-bottom: 12rpx;
				
				.preview-title {
					font-size: 26rpx;
					color: rgba(255, 255, 255, 0.9);
					font-weight: 500;
				}
			}
			
			.preview-text {
				display: block;
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.85);
				line-height: 1.6;
				margin-bottom: 8rpx;
				
				&.highlight {
					font-size: 28rpx;
					color: #fff;
					font-weight: 600;
					margin-top: 4rpx;
				}
			}
		}
		
		.tip {
			display: block;
			font-size: 24rpx;
			color: #999;
			line-height: 1.5;
			padding: 10rpx 20rpx;
			background-color: #f0f9ff;
			border-left: 4rpx solid #2196F3;
			border-radius: 4rpx;
			margin-top: 12rpx;
		}
	}
}
</style>